---
id: "as-decorator"
keywords: ["as", "decorator"]
name: "@as"
summary: "This is the `@as` decorator."
category: "decorators"
---

The `@as` decorator has multiple uses in ReScript.

## Change runtime name of record field

The `@as` decorator can be used on record types to alias record field names to a different JavaScript attribute name.

This is useful to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).

It is also possible to map a ReScript record to a JavaScript array by passing indices to the `@as` decorator.

### Examples

<CodeTab labels={["ReScript", "JS Output"]}>

```res
type action = {
  @as("type") type_: string
}

let action = {type_: "ADD_USER"}
```

```js
var action = {
  type: "ADD_USER",
};
```

</CodeTab>

<CodeTab labels={["ReScript", "JS Output"]}>

```res
type t = {
  @as("0") foo: int,
  @as("1") bar: string,
}

let value = {foo: 7, bar: "baz"}
```

```js
var value = [7, "baz"];
```

</CodeTab>

## Change the runtime representation of a variant constructor

Similarily to changing the runtime name of a record field, you can change the runtime representation of a variant constructor using `@as()`. Only with variants, you have many more options for the runtime representation than for record field names:

<CodeTab labels={["ReScript", "JS Output"]}>

```res
@unboxed
type pet = | @as("dog") Dog | @as(1) Cat | @as(null) SomethingElse

let dog = Dog
let cat = Cat
let somethingElse = SomethingElse

```

```js
let dog = "dog";

let cat = 1;

let somethingElse = null;
```

</CodeTab>

Read more about the [`@as` decorator and variants](../docs/manual/variant.mdx#valid-as-payloads).

## Adding fixed argument values to external functions

You can leverage the `@as` decorator to add fixed values for external function arguments. You then do not need to supply a value for that argument.

<CodeTab labels={["ReScript", "JS Output"]}>

```res
@module("fs")
external readFileSyncUtf8: (string, @as(json`{encoding: "utf8"}`) _) => string = "readFileSync"

let contents = readFileSyncUtf8("./someFile.txt")
```

```js
import * as Fs from "fs";

let contents = Fs.readFileSync("./someFile.txt", { encoding: "utf8" });
```

</CodeTab>

Read more about [fixed arguments in functions](../docs/manual/bind-to-js-function.mdx#fixed-arguments).

### References

- [Bind Using ReScript Record](../docs/manual/bind-to-js-object.mdx#bind-using-rescript-record)
- [Constrain Arguments Better](../docs/manual/bind-to-js-function.mdx#constrain-arguments-better)
- [Fixed Arguments](../docs/manual/bind-to-js-function.mdx#fixed-arguments)
- [`@as` decorator and variants](../docs/manual/variant.mdx#valid-as-payloads)
